import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity
} from 'react-native';
import HTMLView from "react-native-htmlview"
export default class TrendingCell extends Component{
    constructor(props){
        super(props)
        this.state = {
            child:1
        }
    }
    render(){
        //console.log('this.props.data', this.props.data)
        let description = `<p>${this.props.data.item.description}</p>`;
        return (<TouchableOpacity
            onPress={()=>{this.props.onSelect(this.props.data.item, this.state.child)}}
            style={styles.container}
        >
            <View style={styles.cell_container}>
                <Text style={styles.title}>{this.props.data.item.fullName}</Text>
               {/* <Text style={styles.description}>{this.props.data.item.description}</Text>*/}
                <HTMLView
                    value={description}
                    onLinkLongPress={(url)=>{}}
                    stylesheet={{
                        p: styles.description,
                        a: styles.description
                    }}
                />
                <Text style={styles.description}>{this.props.data.item.meta}</Text>
                <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                    <View style={{flexDirection: 'row', alignItems:'center'}}>
                        <Text style={styles.description}>Build by:</Text>
                        {
                            this.props.data.item.contributors.map((item, index, arr)=>{
                                return <Image
                                    key={index}
                                    style={{height:22, width: 22}}
                                    source={{uri:arr[index]}}
                                />
                            })
                        }
                    </View>
                    <Image
                        style={{width: 22, height: 22}}
                        source={require('../res/images/ic_star.png')}
                    />
                </View>
            </View>
        </TouchableOpacity>)
    }
}

const styles= StyleSheet.create({
    container: {
      flex: 1
    },
    title: {
        fontSize: 16,
        marginBottom: 2,
        color: '#212121'
    },
    description: {
        fontSize: 14,
        marginBottom: 2,
        color: '#757575',
        borderRadius: 2
    },
    cell_container: {
        backgroundColor: 'white',
        padding: 10,
        marginLeft: 5,
        marginRight: 5,
        marginVertical: 3,
        borderColor: '#dddddd',
        borderWidth: 0.5,
        shadowColor: 'gray',
        shadowOffset: {width: 0.5, height: 0.5},
        shadowOpacity: 0.4,
        shadowRadius: 1,
        elevation: 2,
    },
})
